<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true" class="nav-custom">
			<!-- <block slot="backText">返回</block> -->
			<block slot="content">台风路径</block>
		</cu-custom>

		<view class="app-box" :style="{ height: appHeight + 'px' }">
			<view class="right-list">
				<view class="icon-type-box">
					<view
						class="icon-type"
						v-for="item in rightList.slice(0, 5)"
						:key="item.key"
						:class="{ 'icon-type-ac': item.isActive }"
						@click="iconTyCG(item)"
					>
						<i :class="`iconfont ${item.icon}`"></i>
						<text class="mt10 text nop"> {{ item.name }}</text>
					</view>
				</view>
				<view
					class="icon-type mt10"
					v-for="item in rightList.slice(5, 6)"
					:key="item.key"
					:class="{ 'icon-type-ac': item.isActive }"
					@click="iconTyCG(item)"
				>
					<i :class="`iconfont ${item.icon}`"></i>
					<text class="mt10 text nop"> {{ item.name }}</text>
				</view>

				<view
					class="icon-type mt50"
					v-for="item in rightList.slice(6, 7)"
					:key="item.key"
					:class="{ 'icon-type-ac': item.isActive }"
					@click="iconTyCG(item)"
				>
					<i :class="`iconfont ${item.icon}`"></i>
					<text class="mt10 text nop"> {{ item.name }}</text>
				</view>
			</view>

			<view class="tf-info" v-show="hasNo">
				<view @click="tyShow = true">查看详情</view>
			</view>

			<template v-if="appHeight > 0">
				<mapView @mapDone="mapDone" ref="mapView" titlePos="center"> </mapView>
			</template>
			<!-- 图例时间轴 -->
			<view class="botBox-list">
				<view class="slider-box" v-show="rightList[1].isActive">
					<playTimeSlider :splitIndex="2" :items="radarList" ref="radarSlider" @change="playRadar"></playTimeSlider>
				</view>
				<view class="slider-box" v-show="rightList[2].isActive">
					<playTimeSlider :splitIndex="2" :items="cloudList" ref="cloudSlider" @change="playCloud"></playTimeSlider>
				</view>
			</view>
		</view>
		<u-popup
			v-model="popupShow"
			mode="bottom"
			border-radius="14"
			closeable
			close-icon="arrow-down-fill"
			@close="closePopup"
		>
			<view class="bottom-map-base">
				<i :class="`iconfont icon-a-taifeng1`" style="color: #0085ff"></i>
				<text class="ml20 fs28">台风列表</text>
			</view>
			<scroll-view class="list-body" scroll-y>
				<uni-data-checkbox
					:multiple="true"
					v-model="typhoon_se"
					:localdata="typhoonLists"
					@clickChecked="onTyphoonChecked"
				>
					<template slot="name" slot-scope="text">
						<view class="u_flex_c tyListStyle">
							<text class="w150">{{ text.text }}</text>
							<text class="w50N">编号：{{ text.value }}</text>
							<text class="more-style ml30" @click.stop="seeMore(text)">查看更多</text>
						</view>
					</template>
				</uni-data-checkbox>
			</scroll-view>
		</u-popup>

		<u-modal
			v-model="legendShow"
			:show-title="false"
			:show-confirm-button="false"
			:mask-close-able="true"
			width="650rpx"
		>
			<view class="legend-content-modal">
				<view class="title">气压风力</view>
				<view class="flex-vc mt5" v-for="(i, index) in legendList" :key="index">
					<view class="ml30 line-item-circle" :style="{ background: i.color }"></view>
					<text class="font-item ml20 fs28"> {{ i.name }}</text>
				</view>
				<view class="title">警戒线</view>

				<view class="warn-box">
					<view style="background: yellow" class="line ml30"></view>
					<text class="ml10">24小时</text>

					<view style="background: blue" class="line ml50"></view>
					<text class="ml10">48小时</text>
				</view>
				<view class="title">预报台</view>

				<view class="warn-box-tai">
					<view class="tai">
						<view style="border-bottom-color: #be4c4c" class="line ml30"></view>
						<view style="color;: #be4c4c">></view>
						<text class="ml10">北京预报</text>
					</view>

					<view class="tai">
						<view style="border-bottom-color: #3e5fd6" class="line ml30"></view>
						<view style="color: #3e5fd6">></view>
						<text class="ml10">福州预报</text>
					</view>
					<view class="tai">
						<view style="border-bottom-color: #54a56e" class="line ml30"></view>
						<view style="color: #54a56e">></view>
						<text class="ml10">东京预报</text>
					</view>
					<view class="tai">
						<view style="border-bottom-color: #ab865e" class="line ml30"></view>
						<view style="color: #ab865e">></view>
						<text class="ml10">台湾预报</text>
					</view>
				</view>

				<view class="title">预报台</view>
				<view class="warn-box-list">
					<view class="tai">
						<view class="ml50 line-item-circle" style="background: #c5dfb1"></view>
						<text class="ml10">7级</text>
					</view>

					<view class="tai">
						<view class="ml30 line-item-circle" style="background: #799f5c"></view>
						<text class="ml10">10级</text>
					</view>
					<view class="tai">
						<view class="ml30 line-item-circle" style="background: #5ca12b"></view>
						<text class="ml10">12级</text>
					</view>
				</view>
			</view>

			<view class="close-lenged">
				<u-icon name="close" color="#fff" size="36rpx" @click="legendShow = false"></u-icon>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
		<u-modal v-model="tyShow" :show-title="false" :show-confirm-button="false" :mask-close-able="true" width="450rpx">
			<view class="ty-content-modal pd25">
				<view>时间:{{ preTf.cTime }}</view>
				<view class="mt5">名称:{{ preTf.cName }}</view>
				<view class="mt5">中心风力:{{ preTf.windPower }}</view>
				<view class="mt5">经度:{{ preTf.longitude }}</view>
				<view class="mt5">纬度:{{ preTf.latitude }}</view>
				<view class="mt5">七级风圈:{{ preTf | filterdata('radius7Quad') }}</view>
				<view class="mt5">十级风圈:{{ preTf | filterdata('radius10Quad') }}</view>
				<view class="mt5">十二级风圈:{{ preTf | filterdata('radius12Quad') }}</view>
				<view class="mt5"> 移动速度:{{ preTf.moveSpeed }}KM/h </view>
				<view class="mt5">移动方向:{{ preTf.moveDir }}</view>
			</view>
		</u-modal>

		<u-modal v-model="isNoTF" content="当前无最新台风" @confirm="confirmTYNew" @cancel="isNoTF = false"></u-modal>
	</view>
</template>

<script>
	import moment from 'moment'
	import typhoonApi from '@/api/monitor/typhoon.js'
	import controlApi from '@/api/monitor/control.js'
	// {
	// 	GetTyphoonYears,
	// 	GetTyphoonList,
	// 	GetTyphoonPath,
	// 	GetTyphoonWindInfo,
	// 	GetWindInfo,
	// 	GetRadarDatas,
	// 	GetCloudDatas,
	// 	GetCloudSites,
	// 	GetTyphoonAlertsData
	// }

	export default {
		components: {
			playTimeSlider: () => import('@/components/common/playTimeSlider.vue')
		},
		data() {
			return {
				appHeight: 0,

				// 台风加载的
				tyLayers: {},
				layerGroups: {},
				titles: [],

				rightList: [
					{ name: '列表', value: 'list', icon: 'icon-list', type: 'list', isActive: false },
					{ name: '雷达', value: 'radar', icon: 'icon-Vector', type: 'radar', isActive: false },
					{ name: '云图', value: 'cloud', icon: 'icon-a-Vector1', type: 'cloud', isActive: false },
					{ name: '地图', value: 'map', icon: 'icon-a-1ditugenzong1', type: 'map', isVec: false },
					{ name: '警报单', value: 'warnCase', icon: 'icon-a-jingbao2', type: 'warnCase' },
					{ name: '测距', value: 'ranging', icon: 'icon-a-Vector2', type: 'ranging', isActive: false },
					{ name: '图例', value: 'legned', icon: 'icon-fenlei', type: 'legned', isActive: false }
				],

				popupShow: false,
				typhoon_se: [],
				typhoonLists: [],
				legendShow: false,

				legendList: [
					{ name: '热带低压（中心风力6-7级）', color: '#69C12C' },
					{ name: '热带风暴（中心风力6-7级）', color: '#223BB8' },
					{ name: '强热带风暴（中心风力10-11级）', color: '#D0BC23' },
					{ name: '台风（中心风力12-13级）', color: '#C75D14' },
					{ name: '强台风（中心风力14-15级）', color: '#BD16CD' },
					{ name: '超强台风（中心风力16级以上）', color: '#C91314' }
				],
				// 时间轴
				cloudList: [],
				radarList: [],
				preTf: {},
				hasNo: false,
				tyShow: false,
				localPos: {},
				isNoTF: false
			}
		},
		mounted() {
			this.statPage()
		},
		computed: {},
		methods: {
			async statPage() {
				// uni.getLocation({
				// 	type: 'gcj02',
				// 	success: async (res) => {
				// 		console.info(`台风位置:`, res)
				// 		this.localPos = res
				// 		// this.getNearSiteNoAndCode(117.79245, 26.3973)
				// 	}
				// })
				let resp = await this.$getLocation()
				this.localPos = resp
				// 页面高度
				this.appHeight = await this.$getHeight('.nav-custom')
			},
			// 地图实例返回
			mapDone(map) {
				this.map = map
				// 初始化图层组
				this.mapGroups = L.baseLayerGroup().addTo(map)

				this.layerGroups = {
					tyGroups: L.baseLayerGroup().addTo(this.mapGroups),
					radarGroups: L.baseLayerGroup().addTo(this.mapGroups),
					cloudGroups: L.baseLayerGroup().addTo(this.mapGroups)
				}
				this.initPage()
			},
			initPage() {
				this.displayWarnLineLayer(true)
				this.getTyphoonYears()
				// 测试数据
				// this.loadTyPath()
			},

			iconTyCG(item) {
				console.info(`item.value:`, item.value)
				switch (item.value) {
					case 'list':
						console.info(`item.isActive:`, item.isActive)
						item.isActive = !item.isActive
						if (!item.isActive) {
							this.popupShow = false
						} else {
							this.popupShow = true
						}
						break
					case 'radar':
						item.isActive = !item.isActive
						this.initRadar(item.isActive)
						break
					case 'cloud':
						item.isActive = !item.isActive
						this.initCloud(item.isActive)
						break
					case 'map':
						item.isVec = !item.isVec
						if (item.isVec) {
							this.$refs.mapView.initVec()
						} else {
							this.$refs.mapView.initImg()
						}
						// 切换地图后会被覆盖，将图层置顶
						this.mapGroups.bringToFront()
						break
					case 'warnCase':
						uni.navigateTo({ url: '/pages-subPackages/monitor/typhoonAlarmSheet' })
						break
					case 'ranging':
						const len = Object.keys(this.tyLayers)
						if (len == 0) {
							uni.showToast({
								icon: 'none',
								title: '请选择台风'
							})
							return
						} else {
							item.isActive = !item.isActive
							this.fnMapRanging(item.isActive)
						}
						break
					case 'legned':
						this.legendShow = !this.legendShow
						break
				}
			},
			// 地图测距
			fnMapRanging(isActive) {
				this.mapDraw(isActive)
			},
			// 绘制
			mapDraw(isChecked) {
				console.info(`isChecked:`, isChecked)
				// console.info(`this.map:`, this.map)
				// if (!this.map.drawGroup) this.map.drawGroup = L.featureGroup().addTo(this.map)
				// if (this.ceju && isChecked) {
				// 	this.map.removeLayer(this.ceju)
				// }

				if (isChecked) {
					if (this.ceju) {
						this.map.removeLayer(this.ceju)
					}
					var latlng = L.latLng(this.preTf.latitude, this.preTf.longitude)
					var latlng_local = L.latLng(this.localPos.latitude, this.localPos.longitude)
					const distance = latlng.distanceTo(latlng_local)

					this.ceju = L.polyline([latlng, latlng_local], { color: '#41A4FF' })
						.bindPopup(`<div style='font-size:16px'>总长:${(distance / 1000).toFixed(2)}公里</div>`, {
							closeOnClick: false
						})
						.on('popupclose', (e) => {
							this.map.removeLayer(this.ceju)
						})
						.addTo(this.map)
					this.map.fitBounds(this.ceju.getBounds())
					setTimeout(() => {
						this.ceju.openPopup(this.map.getCenter())
					}, 250)
				} else {
					if (this.ceju) {
						this.map.removeLayer(this.ceju)
					}
					this.rightList[5].isActive = false
				}
			},

			async getTyphoonYears() {
				const resp = await typhoonApi.GetTyphoonYears()
				if (resp.success) {
					const { data } = resp
					this.tyYears = data.map((item) => {
						item.label = item.text
						return item
					})
					this.tval = this.tyYears[0].value
					this.getTyList(this.tval)
				} else {
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},

			async getTyList(year) {
				if (this.layerGroups.tyGroups) {
					this.layerGroups.tyGroups.clearLayers()
					this.typhoon_se = []
					Object.keys(this.tyLayers).forEach((key) => {
						this.setTitle('', key)
					})
				}
				const resp = await typhoonApi.GetTyphoonList({
					year: year
				})
				if (resp.success) {
					const { data } = resp
					this.typhoonLists = data
					this.$nextTick(() => {
						data.forEach((item) => {
							if (item.selected) {
								this.typhoon_se.push(item.value)
								this.onTyphoonChecked(item, true)
							}
						})
						let index = data.findIndex((el) => el.selected)
						if (index == -1) {
							this.isNoTF = true
						}
					})
				} else {
					this.$hideLoading()
					// uni.showToast({
					// 	icon: 'error',
					// 	title: '获取失败'
					// })
				}
			},
			closePopup() {
				this.rightList[0].isActive = false
			},

			// 查看更多台风
			seeMore(item) {
				uni.navigateTo({
					url: '/pages-subPackages/monitor/typhoonInfo?name=' + `${item.text}&value=${item.value}`
				})
			},

			// 显隐藏台风警戒线图层
			displayWarnLineLayer(isShow) {
				if (isShow) {
					this.WarnLineGroup = L.featureGroup().addTo(this.map)
					// 24小时警戒线和48小时警戒线
					var line24 = [
						new L.LatLng(34, 127),
						new L.LatLng(22, 127),
						new L.LatLng(18, 119),
						new L.LatLng(11, 119),
						new L.LatLng(4.5, 113),
						new L.LatLng(0, 105)
					]
					var line48 = [new L.LatLng(34, 132), new L.LatLng(15, 132), new L.LatLng(0, 120), new L.LatLng(0, 105)]
					L.polyline(line24, {
						color: '#ffff00',
						weight: 1.5
					}).addTo(this.WarnLineGroup)
					L.polyline(line48, {
						color: '#0000ff',
						weight: 0.8
					}).addTo(this.WarnLineGroup)

					// 头尾经纬度
					L.marker([34, 127], {
						icon: L.divIcon({
							html: `<div style=' white-space: nowrap;'>34,127</div>`,
							iconAnchor: [20, 20],
							className: 'taraxDivIcon'
						})
					}).addTo(this.WarnLineGroup)

					L.marker([0, 105], {
						icon: L.divIcon({
							html: `<div style=' white-space: nowrap;'>0,105</div>`,
							iconAnchor: [20, 20],
							className: 'taraxDivIcon'
						})
					}).addTo(this.WarnLineGroup)
					// 头尾经纬度
					L.marker([34, 132], {
						icon: L.divIcon({
							html: `<div style=' white-space: nowrap;'>34,132</div>`,
							iconAnchor: [20, 20],
							className: 'taraxDivIcon'
						})
					}).addTo(this.WarnLineGroup)
					// L.marker([26, 127.5], {
					//     icon: L.icon({
					//         iconUrl: require('@/static/images/taif/hour24.png'),
					//         iconSize: [15, 89],
					//     }),
					// }).addTo(this.WarnLineGroup)

					L.marker([26, 127.5], {
						icon: L.icon({
							iconUrl: require('@/static/image/map/hour24.png'),
							iconSize: [15, 89]
						})
					}).addTo(this.WarnLineGroup)
					L.marker([26, 132.5], {
						icon: L.icon({
							iconUrl: require('@/static/image/map/hour48.png'),
							iconSize: [15, 89]
						})
					}).addTo(this.WarnLineGroup)
				} else {
					if (this.WarnLineGroup) {
						this.map.removeLayer(this.WarnLineGroup)
					}
				}
			},
			// 测试数据
			async loadTyPath(typhoonNo = '202107D') {
				uni.showLoading({
					title: '正在加载'
				})
				const resp = await typhoonApi.GetTyphoonPath({ typhoonNo: typhoonNo })
				console.info(`resp:`, resp)

				this.preTf = resp.data.typhoonData.slice(-1)[0]
				this.hasNo = true

				this.setTyData(resp.data)
				this.$hideLoading()
			},
			// 设置台风数据
			setTyData(data) {
				this.tyLayers[data.typhoonNo] = L.typhoonGroup().setData(data, {
					isWindCircle: true,
					pointRadius: 3.5,
					isAnimation: false,
					tyNameClass: 'tyNameClass'
				})
				let tyGroups = this.layerGroups.tyGroups
				tyGroups.addLayer(this.tyLayers[data.typhoonNo])

				this.setTitle(`${data.typhoonNo} ${data.eName} ${data.cName}`, data.typhoonNo)
				setTimeout(() => {
					// this.fitBounds(tyGroups)
					// this.map.panBy([0.01, 0.01])
					this.flyto(data)
				}, 300)
			},
			flyto(resp) {
				let typhoonData = resp.typhoonData
				let lastItem = typhoonData.slice(-1)
				lastItem = lastItem[0]
				this.map.flyTo([lastItem.latitude, lastItem.longitude], 4, {
					animate: false
				})
				this.map.panBy([0.01, 0.01])
			},
			//台风多选
			onTyphoonChecked(item, checked) {
				if (checked) {
					this.loadTyPath(item.value)
					this.mapDraw(false)
				} else {
					let tyGroups = this.layerGroups.tyGroups
					tyGroups.removeLayer(this.tyLayers[item.value])
					delete this.tyLayers[item.value]
					this.setTitle('', item.value, 'del')
					const len = Object.keys(this.tyLayers)
					this.mapDraw(false)
					if (len == 0) {
						this.hasNo = false
						this.preTf = {}
					} else {
						Object.keys(this.tyLayers).forEach((el) => {
							this.preTf = this.tyLayers[el].data.typhoonData.slice(-1)[0]
						})
					}
				}
			},
			// 将地图的视图设置在合适范围内
			fitBounds(layerGroup, fitBoundsOptions) {
				if (!fitBoundsOptions) {
					fitBoundsOptions = {
						paddingTopLeft: [100, 100],
						paddingBottomRight: [100, 100]
					}
				}
				if (layerGroup && layerGroup.getBounds()._northEast) {
					this.map.fitBounds(layerGroup.getBounds(), fitBoundsOptions)
				}
			},
			// 雷达
			async initRadar(checked) {
				this.layerGroups.radarGroups.clearLayers()
				if (checked) {
					this.radarList = []
					uni.showLoading({
						title: '正在加载'
					})
					try {
						// const time = await controlApi.GetLasted({
						// 	Category: 1,
						// 	SiteNo: '00000',
						// 	productId: 0,
						// 	Level: 0,
						// 	AccHour: 1
						// })
						const resp = await controlApi.getRadarCloundImg({
							pageNo: 1,
							pageSize: 10,
							// Category: 2,
							// EndTime: '2022-07-17 11:54:00',
							// SiteNo: 'Z9598',
							// productId: 37,
							// Level: 0
							Category: 1,
							// EndTime: time.data,
							SiteNo: '00000',
							productId: 0,
							Level: 0
						})
						this.radarImg = null
						this.$hideLoading()
						if (resp.success) {
							const { data } = resp
							this.radarList = data.rows.map((item, index) => {
								item.index = index
								item.desc = moment(item.cTime).format('HH:mm')
								return item
							})

							if (this.radarList.length > 0) {
								this.$nextTick(() => {
									this.$refs.radarSlider.setIndex(this.radarList.length - 1, true)
									this.playRadar(this.radarList.length - 1, true)
								})
								this.setTitle(`${this.radarList[this.radarList.length - 1].cTime}雷达`, 'radar')
							}
						} else {
							this.$hideLoading()
							// uni.showToast({
							// 	icon: 'error',
							// 	title: '获取失败'
							// })
						}
					} catch (error) {
						console.error(error)
						this.$hideLoading()
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} else {
					this.setTitle('', 'radar', 'del')
				}
			},
			playRadar(index, fit) {
				// this.$slots.default
				let playData = this.radarList[index]
				if (!playData) {
					return
				}
				var bounds = [
					[playData.latMin, playData.lonMax],
					[playData.latMax, playData.lonMin]
				]

				let group = this.layerGroups.radarGroups
				const url = playData.filePath
				if (!this.radarImg) {
					this.radarImg = L.imgLayer(url, bounds, {
						pane: 'tilePane'
					}).addTo(group)
					// console.info(`initCloundLayer:`);
					//
				} else {
					this.radarImg.setBounds(bounds)
					this.radarImg.setUrl(url)
				}
				this.setTitle(`${playData.cTime}雷达`, 'radar')
				// this.map.flyTo([24.908853, 118.589421], 5)
				// this.setTitle(playData.title + " 云图", "yt");
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},
			async initCloud(checked) {
				this.layerGroups.cloudGroups.clearLayers()

				if (checked) {
					this.cloudList = []
					uni.showLoading({
						title: '正在加载'
					})
					try {
						// const time = await controlApi.GetLasted({
						// 	Category: 50,
						// 	SiteNo: 'FY4A_B12_R040',
						// 	productId: 0,
						// 	Level: 0,
						// 	AccHour: 1
						// })
						const resp = await controlApi.getRadarCloundImg({
							pageNo: 1,
							pageSize: 10,
							Category: 50,
							productId: 0,
							Level: 0,
							AccHour: 1,
							// StartTime: time.data,
							SiteNo: 'FY4A_B12_R040'
						})

						this.$hideLoading()
						this.imageOverlayr = null
						if (resp.success) {
							const { data } = resp
							this.cloudList = data.rows.map((item, index) => {
								item.index = index
								item.desc = moment(item.cTime).format('HH:mm')
								return item
							})

							if (this.cloudList.length > 0) {
								this.$nextTick(() => {
									this.$refs.cloudSlider.setIndex(this.cloudList.length - 1)
									this.playCloud(this.cloudList.length - 1, true)
								})
								this.setTitle(`${this.cloudList[this.cloudList.length - 1].cTime}云图`, 'cloud')
							}
						} else {
							this.$hideLoading()
							// uni.showToast({
							// 	icon: 'error',
							// 	title: '获取失败'
							// })
						}
					} catch (error) {
						console.error(error)
						this.$hideLoading()
						// uni.showToast({
						// 	icon: 'error',
						// 	title: '获取失败'
						// })
					}
				} else {
					this.setTitle('', 'cloud', 'del')
				}
			},
			playCloud(index, fit) {
				let playData = this.cloudList[index]
				if (!playData) {
					return
				}
				// var bounds = [
				// 	[-0.65, 147.637],
				// 	[60.618, 72.319]
				// ]
				var bounds = [
					[playData.latMin, playData.lonMax],
					[playData.latMax, playData.lonMin]
				]
				let groups = this.layerGroups.cloudGroups
				const url = playData.filePath
				if (!this.imageOverlayr) {
					this.imageOverlayr = L.imgLayer(url, bounds, {
						pane: 'tilePane',
						className: 'demo',
						opacity: 0.5
					}).addTo(groups)
				} else {
					this.imageOverlayr.setBounds(bounds)
					this.imageOverlayr.setUrl(url)
				}
				this.setTitle(`${playData.cTime}云图`, 'cloud')
				// this.map.flyTo([24.908853, 118.589421], 5)
				// this.setTitle(playData.title + " 云图", "yt");
				var polygon = L.polygon(bounds)
				if (fit) {
					this.map.fitBounds(polygon.getBounds())
				}
			},
			setTitle(data, key, type = 'add') {
				const index = this.titles.findIndex((item) => {
					return item.key == key
				})
				if (type == 'add') {
					if (index > -1) {
						this.titles[index].title = data
					} else {
						this.titles.push({ title: data, key: key })
					}
				}
				if (type == 'del') {
					if (index > -1) {
						this.titles.splice(index, 1)
					}
				}
				this.$refs.mapView.setTitle(this.titles)
			},

			// 获取最新的台风
			async initBytyphoon() {
				const resp = await controlApi.getLastTyData()
				if (resp.success) {
					const { data } = resp
					if (data && data.length > 0) {
						this.isNoTF = false
						data.forEach((el) => {
							L.typhoonGroup()
								.setData(el, {
									isWindCircle: true,
									pointRadius: 3.5,
									tyNameClass: 'tyNameClass'
									// tyNameClass: 'tyNameClass'
								})
								.addTo(this.layerGroups.alone)
						})
						this.flyto(data[0])
					} else {
						this.isNoTF = true
					}
				} else {
					this.$hideLoading()
					uni.showToast({
						icon: 'error',
						title: '获取失败'
					})
				}
				// if (resp.data && resp.data.typhoonNo) {
				// 	L.typhoonGroup()
				// 		.setData(resp.data, {
				// 			isWindCircle: true,
				// 			pointRadius: 3.5
				// 		})
				// 		.addTo(this.layerGroups.alone)
				// 	this.fitBounds(this.layerGroups.alone)
				// 	this.isNoTF = false
				// } else {
				// 	this.isNoTF = true
				// }
			},
			confirmTYNew() {
				this.isNoTF = false
			}
		},
		filters: {
			filterdata: function (item, propsStr) {
				console.info(`item, propsStr:`, item, propsStr)
				if (!item[propsStr]) {
					return ''
				}
				var radius7Quad = item[propsStr].split(',').sort()
				var radius7QuadStr = ''
				var minRadius7 = radius7Quad.shift()
				var maxRadius7 = radius7Quad.pop()
				if (minRadius7 != 9999 || maxRadius7 != 9999) {
					if (minRadius7 == maxRadius7) {
						radius7QuadStr = maxRadius7 + '公里'
					} else {
						radius7QuadStr = minRadius7 + '-' + maxRadius7 + '公里'
					}
				}
				return radius7QuadStr
			}
		}
	}
</script>

<style lang="less" scoped>
	.app-box {
		position: relative;
		width: 100%;
	}

	.right-list {
		position: absolute;
		top: 30rpx;
		right: 10rpx;
		z-index: 999;
		height: 300rpx;
	}

	.botBox-list {
		position: absolute;
		z-index: 700;
		width: 720rpx;
		bottom: 0rpx;
		left: 15rpx;
		.slider-box {
			display: flex;
			align-items: center;
			height: 87rpx;
			padding: 0 20rpx;
			width: 100%;
			background: #fff;
			margin-bottom: 10rpx;
			border-radius: 10rpx;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.36);
		}
	}

	.icon-type-box {
		// padding: 10rpx 0;
		.icon-type {
			width: 100%;
		}
	}
	.bottom-map-base {
		padding: 20rpx 0 0 20rpx;
	}
	.list-body {
		width: 750rpx;
		height: 350rpx;
		background: #fff;
		overflow-y: auto;
		padding: 20rpx;
		.tyListStyle {
			// height: 26rpx;
			// border: 2rpx solid red;
			padding: 10rpx 5rpx;
			background: #f4f9fd;
			border-radius: 8rpx;
			display: flex;
			flex-wrap: nowrap;

			.w150 {
				display: inline-block;
				width: 330rpx;
				text-align: left;
			}

			.w50N {
				display: inline-block;
				text-align: left;
				width: 180rpx;
			}

			.more-style {
				display: inline-block;
				color: #007aff;
				text-align: left;
			}
		}
	}

	.legend-content-modal {
		width: 650rpx;
		font-size: 28rpx;
		padding-bottom: 25rpx;
		.title {
			height: 80rpx;
			display: flex;
			align-items: center;
			padding-left: 20rpx;
			border-bottom: 1rpx solid rgba(188, 188, 188, 0.4);
			margin-bottom: 20rpx;
			font-weight: 550;
		}
		.line-item-circle {
			width: 20rpx;
			height: 20rpx;
			border-radius: 10rpx;
		}
		.split-line {
			width: 100%;
			border-bottom: 1rpx solid rgba(188, 188, 188, 0.4);
			margin: 30rpx 0;
		}
		.warn-box {
			display: flex;
			align-items: center;
			.line {
				width: 65rpx;
				height: 2rpx;
			}
		}

		.warn-box-tai {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding-right: 50rpx;
			.tai {
				width: 50%;
				display: flex;
				align-items: center;
			}
			.line {
				width: 65rpx;
				border-bottom: 2rpx dotted;
			}
		}
		.warn-box-list {
			display: flex;
			align-items: center;
			padding-right: 150rpx;
			justify-content: space-between;
			.tai {
				display: flex;
				align-items: center;
			}
			.line-item-circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
			}
		}
	}
	.close-lenged {
		width: 81rpx;
		height: 81rpx;
		border: 2rpx solid #ffffff;
		position: fixed;
		left: 50%;
		bottom: 120rpx;
		transform: translateX(-50%);
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
	}

	.tf-info {
		position: absolute;
		z-index: 700;
		left: 10rpx;
		top: 10rpx;
		color: #fff;
		font-size: 26rpx;
		padding: 15rpx;
		background: #41a4ff;
		box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
		border-radius: 12rpx;
	}
</style>
